<template>
	<view class="container">		
		<view class="guess-section">
			<view 
				v-for="(item, index) in tearmList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<text class="title-name clamp">{{item.name}}
				  <text class="cell-icon yticon icon-hot icon-color-red"></text>
				</text>
				  <text class="title-level clamp">{{item.level}}</text>
				  <text class="title-desc clamp">{{item.desc}}</text>
                  <p  :class="item.themColor"><span class="flag-text">{{item.level}}</span></p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	export default {
		data() {
			return {
				tearmList:[] //教练列表
			};
		},
		async onLoad(){
			this.loadData();
		},
		methods:{
			
			async loadData() {
				var [error, res] = await uni.request({
					method:'POST',
					url: service.baseUrl+'/api/home/getTearmList', 
					data: {},
					header: {'Content-Type': 'application/json'}
				});
				if(res.data.code=200){
					//教练列表
					this.tearmList=res.data.data;
				}else{
					 uni.showToast({
					    icon: 'error',
					    title: res.data.message,
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg +2upx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}
	/* 教练列表 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 20upx 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
		.title-name{
			font-size: $font-sm;
			font-weight: 600;
			line-height: 1;
			text-align: center;
			padding: 16upx;
		}
		.title-level{
			font-size: $font-sm;
			color: #a99c99;
			line-height: 1;
            padding: 16upx;
			text-align: center;
			border: 1px solid #d8d8d8;
			border-radius: 5px;
		}
		.title-desc{
			font-size: $font-sm;
			color: #a99c99;
			line-height: 1;
			padding: 16upx;
			text-align: center;
		}
	}
	.flag {
		position: absolute;
	}
	.flag:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border-style: solid;
		border-width: 50upx;     /* [1] */
	}
	.flag-text {
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg) translateZ(0);    /* [1] */
		transform: rotate(-45deg) translateZ(0);
		color: #FFF;
		display: inline-block;
		position: absolute;
		top: 20upx;
		left: 0;
		z-index: 1;
		font-size:$font-sm;
		text-transform: uppercase;
		width: 50upx;
		text-align: center;
	}

	.flag.is-offer-red:before {
		border-color: rgba(206,3,5,.7) transparent transparent rgba(206,3,5,.7);
	}
	.flag.is-offer-yellow:before {
		border-color: rgba(228, 175, 18, 0.7) transparent transparent rgba(228, 175, 18, 0.7);
	}
</style>
